<template>
  <view class="login-box">
    <text class="title-1">嗨词店铺管理</text>
    <text class="title-2">欢迎登录进行使用！</text>

    <view class="input-item">
      <input
        class="uni-input"
        focus
        placeholder="请输入您的账户"
        v-model="userInfo.username"
      />
    </view>
    <view class="input-item input-item-password">
      <input
        type="password"
        class="uni-input"
        focus
        placeholder="请输入密码"
        v-model="userInfo.password"
      />
    </view>

    <van-button
      loading-text="登录中..."
      :loading="loading"
      @click="pathHome"
      class="login-btn"
      type="primary"
      :disabled="!userInfo.username || !userInfo.password"
      >登录</van-button
    >
    <view class="checkboxp">
      <checkbox-group @change="change">
        <label>
          <checkbox :value="1" />
          <text style="color: rgba(150, 158, 148, 1)"
            >我已阅读并同意
            <text @click="pathprivacy" style="color: rgba(20, 86, 240, 1)"
              >服务协议</text
            >
            和
            <text @click="pathprivacy" style="color: rgba(20, 86, 240, 1)"
              >隐私政策</text
            >
          </text>
        </label>
      </checkbox-group>
    </view>
  </view>
</template>

<script setup>
import { Login } from "@/apis/login.js"
import { onLoad, onShow } from "@dcloudio/uni-app"
import { ref, reactive } from "vue"
const loading = ref(false)
const userInfo = reactive({
  username: "",
  password: "",
  islock: 0
})

const pathHome = async () => {
  if (userInfo.islock !== 1) {
    uni.showToast({
      icon: "none",
      title: "请同意服务协议",
      duration: 2000
    })
    return
  }
  try {
    if (loading.value) {
      return
    }
    loading.value = true
    let { data } = await Login(userInfo)
    if (data.token) {
      let token = uni.setStorageSync("englishToken", data.token)
      uni.reLaunch({
        url: "/pages/index/index"
      })
    }
    loading.value = false
    // console.log(data)
  } catch (err) {
    loading.value = false
    // console.log(err)
  }
}
const change = (e) => {
  console.log(e.detail.value)
  if (e.detail.value.length > 0) {
    userInfo.islock = 1
  } else {
    userInfo.islock = 0
  }
}
const pathprivacy = () => {
  uni.navigateTo({
    url: "/pages/login/privacy"
  })
}
</script>

<style lang="scss" scoped>
.login-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw; 
  min-height: 100vh; 
  background: rgba(255, 255, 255, 1);
  padding-top: 371rpx; 
  padding-bottom: 60rpx;
}

.title-1 {
  font-size: 63.08rpx;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 86.55rpx;
  color: rgba(31, 35, 41, 1);
  text-align: left;
  margin-bottom: 33rpx;
}

.title-2 {
  font-size: 42.06rpx;
  font-weight: 400;
  letter-spacing: 1.75rpx;
  line-height: 57.7rpx;
  color: rgba(100, 106, 115, 1);
  text-align: center;
}

.input-item {
  width: 671.14rpx;
  height: 106.89rpx;
  opacity: 1;
  border-radius: 26.29rpx;
  background: rgba(243, 245, 246, 1);
  padding: 0 44rpx;
  border: 1.75px solid rgba(208, 211, 213, 1);
  margin-top: 93rpx;
}

.input-item-password {
  margin-top: 65rpx;
}

.uni-input {
  height: 106.89rpx;
}

.login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 163rpx;
  width: 672.9rpx;
  height: 106.89rpx;
  font-size: 52.57rpx;
  font-weight: 400;
  line-height: 72.13rpx;
  color: rgba(243, 245, 246, 1);
  text-align: center;
  border-radius: 26.29rpx;
}

.checkboxp {
  width: 662.9rpx;
  margin-top: 36rpx;

  font-size: 28.04rpx;
  line-height: 38.46rpx;
}

:deep(.uni-label-pointer) {
  font-size: 28.04rpx;
  line-height: 38.46rpx;
}

:deep(.uni-checkbox-input) {
  border-radius: 50%;
}
</style>
